<template>
    <div class="app-footer">

        <!-- 联系我们 -->
        <div class="contact">
            <div class="container">
                <!-- 自定义列表 -->
                <dl>
                    <!-- dt标签语义化，指名称 -->
                    <dt>客户服务</dt>
                    <!-- dd 标签语义化，指描述 -->
                    <dd><i class="iconfont icon-kefu"></i>在线客服</dd>

                    <dd><i class="iconfont icon-yijianfankui"></i>问题反馈</dd>
                </dl>

                <dl>
                    <!-- dt标签语义化，指名称 -->
                    <dt>关注我们</dt>
                    <!-- dd 标签语义化，指描述 -->
                    <dd><i class="iconfont icon-weixin"></i>公众号</dd>

                    <dd><i class="iconfont icon-weibo"></i>微博</dd>
                </dl>

                <dl>
                    <!-- dt标签语义化，指名称 -->
                    <dt>下载APP</dt>
                    <!-- dd 标签语义化，指描述 -->
                    <dd class="qrcode"><img src="../assets/images/qrcode.jpg" alt=""></dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <router-link to="/download">下载页面</router-link>
                    </dd>
                </dl>

                <dl>
                    <dt>服务热线</dt>
                    <!-- <small> 标签定义较小的文本（如版权和其他旁注），也是基于语义标签设计。  -->
                    <dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00</small></dd>
                </dl>
            </div>
        </div>

        <div class="extra">
            <div class="container">
                <div class="slogan">
                    <a href="javascript:;">
                        <i class="iconfont icon-smile"></i>
                        <span>价格亲民</span>
                    </a>
                    <a href="javascript:;">
                        <i class="iconfont icon-packing-labeling"></i>
                        <span>物流快捷</span>
                    </a>
                    <a href="javascript:;">
                        <i class="iconfont icon-appreciate"></i>
                        <span>品质新鲜</span>
                    </a>
                </div>
        
              <!-- 版权信息 -->
				<div class="copyright">
					<p>
						<a href="javascript:;">关于我们</a>
						<a href="javascript:;">帮助中心</a>
						<a href="javascript:;">售后服务</a>
						<a href="javascript:;">配送与验收</a>
						<a href="javascript:;">商务合作</a>
						<a href="javascript:;">搜索推荐</a>
						<a href="javascript:;">友情链接</a>
					</p>
					<p>CopyRight © 小兔鲜儿</p>
				</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "app-footer"
}
</script>

<style lang="less" scoped>
@import '@/assets/styles/variables.less';

.app-footer {
    background-color: #f5f5f5;
    padding-top: 20px;


    .contact {
        background-color: #fff;

        /*注意，.container 这个class 在全局style中设置了宽 1024px，所以此处不再重复设置*/
        .container {

            margin: 0 auto;
            padding: 60px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;

            dl {
                height: 190px;
                padding: 0 72px;
                text-align: center;
                border-right: 1px solid #f2f2f2;
                color: #999;

                /* 当前元素，且是父元素即container元素的第一个*/
                &:first-child {
                    padding-left: 0;
                }

                /* 当前元素，且是父元素即container元素的最后个*/
                &:last-child {
                    border-right: none;
                    padding-right: 0;
                }

                dt {
                    font-size: 18px;
                    line-height: 1;
                }

                dd {
                    width: 92px;
                    height: 92px;
                    margin: 36px 12px 0 0;
                    float: left;
                    border: 1px solid #ededed;
                    padding-top: 10px;

                    .iconfont {
                        font-size: 36px;
                        color: #666;
                        display: block;
                    }

                    &:hover {
                        .iconfont {
                            color: @themeColor;
                        }
                    }

                    &:last-child {
                        margin-right: 0;
                    }
                }

                .qrcode {
                    width: 92px;
                    height: 92px;
                    padding: 7px;
                    border: 1px solid #ededed;
                }

                .download {
                    padding-top: 5px;
                    font-size: 14px;
                    width: auto;
                    height: auto;
                    border: none;

                    span {
                        display: block;
                    }

                    a {
                        display: block;
                        line-height: 1;
                        padding: 10px 25px;
                        margin-top: 5px;
                        color: #fff;
                        border-radius: 2px;
                        background-color: @themeColor;
                    }
                }

                .hotline {
                    padding-top: 20px;
                    font-size: 22px;
                    color: #666;
                    width: auto;
                    height: auto;
                    border: none;

                    small {
                        display: block;
                        font-size: 15px;
                        color: #999;
                    }
                }
            }
        }
    }


    .extra{
        background-color: #333;
        .slogan {
            height: 178px;
            line-height: 58px;
            padding: 60px 100px;
            border-bottom: 1px solid #434343;
            display: flex;
            justify-content: space-between;
            a {
                height: 58px;
                line-height: 58px;
                color: #fff;
                font-size: 28px;
                i {
                    font-size: 50px;
                    vertical-align: middle;
                    margin-right: 10px;
                    font-weight: 100;
                }
                span {
                    vertical-align: middle;
                    text-shadow: 0 0 1px #333;
                }
            }
        }
    
        .copyright {
            height: 170px;
            padding-top: 40px;
            text-align: center;
            color: #999;
            font-size: 15px;
            p {
                line-height: 1;
                margin-bottom: 20px;
            }
            a {
                color: #999;
                line-height: 1;
                padding: 0 10px;
                border-right: 1px solid #999;
                &:last-child {
                    border-right: none;
                }
            }
        }
    }
  
}</style>